<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册-{{$SEO['title']}}</title>
    <meta name="keywords" content="{{$SEO['keywords']}}"/>
    <meta name="description" content="{{$SEO['description']}}"/>
    <!--公用css引用-->
    @include('front.common.style')
    <!--END/公用css引用-->
    <link rel="stylesheet" href="../dist/css/login.css">

</head>
<body>

<!--头部-->
<div class="login-head inbox">
    <div class="logo-wrap">
        <!-- <a href="/"><img class="logo fn-fl" src="../images/logo.jpg" alt="橙e网"></a> -->
        <span class="welcome fn-fl">欢迎注册橙e网</span>
    </div>
</div>
<!--END/头部-->

<div class="inbox login-box reg-box">
    <ul class="ui-cols-2">
        <li class="col">
            <img class="l-img" src="../images/login/pic-2.jpg" alt="">
        </li>
        <li class="col form-wrap">
            <div class="form-head">
                <div class="tit-1">
                    <div class="h">橙e网新用户注册</div>
                    <!-- <span class="more">我已注册，</span><a href="/user/login" class="more">马上登录 <i class="icon icon-arrow-r1"></i></a> -->
                </div>
            </div>

            {!! Form::open(['url'=>'','method' => 'get', 'class'=>'bl-form bl-formver form-L form-login js-placeholder']) !!}
                <input name="ReturnUrl" type="hidden">
                <ul class="form-list">
                <?php //print_r ($errors->first());?>

                    <!-- <li class="bl-form-group">
                        <label class="for">请输入您的用户名：</label>
                        <div class="controls hasIcon">
                            <span class="f-icon icon-l"><i class="icon icon-user fn-ml10"></i></span>
                            {!! Form::text('user_name',old('user_name'),array('id'=>'user_name', 'class'=>'fn-tinput','placeholder'=>'请输入您的用户名','required'=>'required','data-rule-dw'=>'true','data-msg-dw'=>'格式错误'))!!}
                            <p id="user_name-error" class="error"></p>
                        </div>
                    </li>

                    <li class="bl-form-group">
                        <label class="for">请输入密码：</label>
                        <div class="controls hasIcon">
                            <span class="f-icon icon-l"><i class="icon icon-pwd fn-ml10"></i></span>
                            <input id="password" type="password" name="password" class="fn-tinput" placeholder="密码6-20位字符，建议由字母、数字、符号两种以上组合" required="required">

                            <p id="password-error" class="error"></p>

                        </div>
                    </li>

                    <li class="bl-form-group">
                        <label class="for">请再次确认密码：</label>
                        <div class="controls hasIcon">
                            <span class="f-icon icon-l"><i class="icon icon-pwd fn-ml10"></i></span>
                            <input id="password_confirmation" type="password" name="password_confirmation" class="fn-tinput" placeholder="请再次确认密码" required="required">

                            <p id="password_confirmation-error" class="error"></p>

                        </div>
                    </li> -->
                    <li class="bl-form-group">
                        <label class="for">请输入您的姓名：</label>
                        <div class="controls hasIcon">
                            <span class="f-icon icon-l"><i class="icon icon-user fn-ml10"></i></span>
                            {!! Form::text('user_name',old('user_name'),array('id'=>'user_name', 'class'=>'fn-tinput','placeholder'=>'请输入您的姓名：','required'=>'required','data-rule-dw'=>'false','data-msg-dw'=>'格式错误'))!!}
                            <p id="user_name-error" class="error"></p>
                        </div>
                    </li>

                     <li class="bl-form-group">
                        <label class="for">请输入您的身份证号：</label>
                        <div class="controls hasIcon">
                            <span class="f-icon icon-l"><i class="icon icon-phone fn-ml10"></i></span>
                            {!! Form::text('identity_card',old('identity_card'),array('id'=>'identity_card', 'class'=>'fn-tinput','placeholder'=>'请输入您的身份证号','required'=>'required'))!!}
                            <p id="identity_card-error" class="error"></p>
                        </div>
                    </li>

                    <li class="bl-form-group">
                        <label class="for">请输入您的手机号：</label>
                        <div class="controls hasIcon">
                            <span class="f-icon icon-l"><i class="icon icon-phone fn-ml10"></i></span>
                            {!! Form::text('phone',old('phone'),array('id'=>'phone', 'class'=>'fn-tinput','placeholder'=>'请输入您的手机号','required'=>'required'))!!}
                            <p id="phone-error" class="error"></p>
                        </div>
                    </li>

                    <!-- <li class="bl-form-group">
                        <label class="for">验证码：</label>
                        <div class="controls hasIcon">
                            <span class="f-icon icon-l"><i class="icon icon-pwd fn-ml10"></i></span>
                            <input type="text" id="code" name="chkCode" style="width:146px;" class="fn-tinput fn-tinput-short" placeholder="请输入验证码" required="required">
                            <a class="chk-code" href="#"><img src="{{ URL('captcha/0.1') }}" alt="" id="chkCode" onclick="javascript:re_captcha();"></a>
                            <span>看不清？<a href="javascript:;" class="text-color-8" onclick="javascript:re_captcha();">换一张</a></span>
                        </div>
                    </li> -->

                    <li class="bl-form-group">
                        <label class="for">短信验证码：</label>
                        <div class="controls hasIcon">
                            <span class="f-icon icon-l"><i class="icon icon-pwd fn-ml10"></i></span>
                            <input type="text" name="MsgCode" id="MsgCode" class="fn-tinput fn-tinput-short" placeholder="短信验证码" required="required">
                            <a id="btnSendCode" class="fn-btn btn-white1" style="width:124px;">发送验证码</a>
                        </div>
                    </li>

                    <!-- <li class="bl-form-group form-text">
                        <label class="for">协议：</label>
                        <div class="controls">
                            <label>
                                <input class="js-autoChecked" type="checkbox" name="agreement" value="true" checked>
                                <span>同意<a class="text-color-8" href="/help/agreement" target="_blank">《阿福易购用户注册协议》</a></span>
                            </label>
                        </div>
                    </li> -->

                    <li class="bl-form-group fn-mb0">
                        <label class="for fn-vhide">提交：</label>
                        <div class="controls form-btns">
                            <!-- <button type="submit" class="fn-btn btn-primary w100" name="submitButton">同意协议并注册</button> -->
                            <button type="button" class="fn-btn btn-primary w100" id="registButton">注册</button>
                        </div>
                    </li>
                </ul>
            {!! Form::close() !!}
        </li>
    </ul>
</div>

<!--底部-->
<div class="f-aboutUs">
    <div class="inbox fn-tc">
        <!-- <a target="_blank" href="/help/about-afu">关于阿福易购</a>
        <a target="_blank" href="/help/about">公司简介</a>
        <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=3039215126&site=qq&menu=yes">联系我们</a>
        <a target="_blank" href="#">招聘信息</a>
        <a target="_blank" href="/help/agreement">用户协议</a>
        <br>
        <p>
            <span>增值电信经营许可证编号：豫B2-20160019</span><a class="fn-ml10 link" target="_blank" href="http://www.miitbeian.gov.cn/">ICP备案号：豫ICP16000288号-1</a> Copyright ©<a class="link" href="/">WWW.AFYIGOU.COM</a> 2015
        </p> -->
    </div>
</div>
<!--END/底部-->

<!--公用js引用-->
@include('front.common.script')
<!--END/公用js引用-->
<script src="../dist/js/jquery.validation.js"></script>
</body>
</html>

<script>  
  function re_captcha() {
        var $url = "{{ URL('captcha') }}" + "/" + Math.random();
        $('#chkCode').attr('src',$url);
  }

  function showMsg(msg){
          if(!msg||msg.length==0) return false;

          $('body').notify(msg,0,{
              autoHidden:true,
              delay:2500,
              posStyle:"top:-30px;margin-top:-20px;",
              callback:function(){
                  $submitBtn.prop('disabled',false);
              }

          });
      }

var codeBtn=$('#btnSendCode');
codeBtn.click(function(){
    if(codeBtn.hasClass('disabled')) return false;
    var that=$(this),sNum=60000,countDown;
    var user_name = $('#user_name'),name=user_name.val();
    var identity_card = $('#identity_card'),identity_card_num=identity_card.val();
    var phone = $('#phone'),phoneNum=phone.val();

    if(name==''){
        user_name.focus();
        return false;
    }

    if(identity_card_num==''){
        identity_card.focus();
        return false;
    }else{
        var reg=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/;
        var reg2 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
        if(!reg.test(identity_card_num) && reg2.test(identity_card_num)){
            identity_card.focus();
            return false;
        }
    }

    if(phoneNum==''){
        phone.focus();
        return false;
    }else{
        var reg=/^1[34578][0-9]{9}$/;
        if(!reg.test(phoneNum)){
            phone.focus();
            return false;
        }
    }

    var url = "pinganpay/pingan_send_msg/" + phoneNum;
    $.ajax({
        url: url ,
        data: "",
        type:'get',
        dataType:'json',
        success:function(res){

            if(res.status=='success' && res.errorcode == '000000'){

                alert(res.errormsg);
                re_captcha();
            }else {
//                $codeBtn.addClass('is-countDown');
//                    countDown=tools.buttonCountdown(that,sNum,'s','后可重发',function(){
//                    $codeBtn.removeClass('is-countDown');
//                });
               countDown=tools.buttonCountdown(that,sNum,'s','后重发',phoneNum);
            }

            switch(res.status){

              case "success":

                  switch(res.errorcode){

                    case "000000":

                      break;
                  }
                break;

              case "fail":

                  switch(res.errorcode){

                    case "100002":

                      alert(res.errormsg);

                      break;

                    case "100003":

                      alert(res.errormsg);
                      countDown=tools.buttonCountdown(that,res.remainTime,'s','后重发',phoneNum);

                      break;
                  }
                break;
            }
        },
        error:function(e){

            that.removeClass('disabled');
            phone.next('.error').show().text(e.responseJSON.phone[0]).end().focus();
        }
    })
});

  //根据浏览器语言加载语言包 后期需要统一处理
  tools.loadJs('../js/localization/messages_zh.js');

  var jqForm=$('.js-form');

  jqForm.validate({
      errorElement:'p',
      submitHandler: function(form) {
          //自动选择同意 《阿福易购会员章程》
          $('.js-autoChecked').prop('checked',true);

          $.ajax({
              url:'/user/register',
              type:'post',
              data:jqForm.serialize(),
              success:function(res){
                  tools.log(res,typeof res);
                  if(typeof res == 'string'){
                    document.write(res);
                  }else{
                    re_captcha();
                  }
              },
              error:function(e) {
                if(e.responseJSON){
                    for(var i in e.responseJSON){
                        var curInput=$('[name="'+i+'"]');
                        tools.log(curInput);
                        curInput.length&&curInput.siblings('.error').text(e.responseJSON[i][0]).show();
                    }
                }
                re_captcha();
              }
          });
      },
      rules: {
          user_name:{

              required:true,
              rangelength:[2,20]
          },
          phone:{
              mobile:true
          },
          identity_card:{
              required:true,
              rangelength:[13,18]
          }
      },
      messages: {
          user_name: {
              required:'请填写您的用户名',
              remote:'该用户名已使用'
          },
          phone:{
              required:'请填写您的手机号'
          },
          identity_card:{
              required:'请填写您的身份证号'
          }
      },
      errorPlacement: function(error, element) {
        var parentItem=element.parent(".controls"),
            errorItem=parentItem.find('.error');
             if(errorItem.length==2){
                errorItem.eq(1).remove();
             }
         error.appendTo(parentItem);
      }
  });

$('#registButton').on('mouseup',function(e){

    var user_name = $('#user_name'),name=user_name.val();
    var identity_card = $('#identity_card'),identity_card_num=identity_card.val();
    var phone = $('#phone'),phoneNum=phone.val();
    var msg_code = $('#MsgCode'),verification_code=msg_code.val();

    var formData = {};

    if(name==''){
        user_name.focus();
        return false;
    }

    if(identity_card_num==''){
        identity_card.focus();
        return false;
    }else{
        var reg=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}(\d|x|X)$/;
        var reg2 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
        if(!reg.test(identity_card_num) && reg2.test(identity_card_num)){
            identity_card.focus();
            return false;
        }
    }

    if(phoneNum==''){
        phone.focus();
        return false;
    }else{
        var reg=/^1[34578][0-9]{9}$/;
        if(!reg.test(phoneNum)){
            phone.focus();
            return false;
        }
    }

    if(verification_code==''){
        MsgCode.focus();
        return false;
    }

    formData.name = name;
    formData.identity = identity_card_num;
    formData.mobile = phoneNum;
    formData.verification_code = verification_code;

    var url = "pinganpay/identity_verification";

    $.ajax({
        type: "GET",
        url: url,
        data: formData,
        dataType: "json",
        headers: {
            'X-CSRF-Token': "{{csrf_token()}}"
        },
        success: function (msg) {
            console.log(msg);
            if(msg.status){

                alert('注册成功');
                location.reload();

            }else{
                alert('注册失败');
            }//end if()

        }
    }); //end ajax

});
</script>